.modal{
  @include position(fixed);
  z-index: 10;
  transition: top .5s;
  // 遮罩层
  .mask{
    @include position(fixed);
    background-color: #000;
    opacity: .5;
  }
 
  .modal-dialog{
    @include position(fixed,40%,50%,660px,auto);
    transform: translate(-50%,-40%);
    transition: all .5s;
    .modal-header{
      @include flex();
      padding: 0 25px;
      height: 60px;
      font-size: $fontI;
      color: $colorB;
      background: $colorJ;
      .icon-close{
        display: inline-block;
        @include bgImg(14px,14px,'/imgs/icon-close.png');
        transition: .2s;
        &:hover{
          transform: scale(1.5);
          transition: .2s;
        }
      }
    }
    .modal-body{
      padding: 42px 40px 45px;
      font-size: $fontJ;
      background-color: $colorG;
    }
    .modal-footer{
      line-height: 82px;
      text-align: center;
      background: $colorJ;
    }
    &.slide-enter-active{
      top:40%;
    }
    &.slide-leave-active{
      top:-100%;
    }
    &.slide-enter{
      top:-100%;
    }
  }
}